<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <style type="text/css">
    .container{
      width: 420px;
      height: 320px;
      min-height: 320px;
      max-height: 320px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      padding: 20px;
      z-index: 130;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
      font-size: 16px;
    }

    .close{
      background-color: white;
      border: none;
      font-size: 18px;
      margin-left: 410px;
      margin-top: -10px;
    }

    .layui-input{
      border-radius: 5px;
      width: 300px;
      height: 40px;
      font-size: 15px;
    }

    .layui-form-item{
      margin-left: -20px;
    }

    #logoid{
      margin-top: -16px;
      padding-left:150px;
      padding-bottom: 15px;
    }

    .layui-btn{
      margin-left: -50px;
      border-radius: 5px;
      width: 350px;
      height: 40px;
      font-size: 15px;
    }

    .verity{
      width: 120px;
    }

    .font-set{
      font-size: 13px;
      text-decoration: none;
      margin-left: 120px;
    }

    a:hover{
      text-decoration: underline;
    }

  </style>
</head>

<body >
<form class="layui-form" >
  <div class="container">

    <button class="close" title="关闭">X</button>

    <div class="layui-form-mid layui-word-aux">
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="username" id="username"required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
      <div class="layui-input-inline">
        <input type="password" name="password" id="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="login" name="login" id="login">
          登陆
        </button>
      </div>
    </div>

  </div>
</form>

<script>
  layui.use(['form','jquery', 'layedit', 'laydate'], function(){
    var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,$= layui.jquery
            ,laydate = layui.laydate;

    //监听提交
    form.on('submit(login)', function(data){
      var $1 = $.trim($("#username").val());
      var $2 = $.trim($("#password").val());

      if($1 == ''){
        layer.msg('用户名不能为空',function() {time:2000});
        return false;
      }

      if($2 == ''){
        layer.msg('密码不能为空',function() {time:2000});
        return false;
      }

      $.ajax({
        url:'/login/login',//发出请求
        type:'post',
        data:{"username":$1,"password":$2},
        success:function (data)  {
          console.log(data)
          if(data.code==0){//返回1说明登录成功
            window.parent.frames.location.href="/about"
          }else {
            layer.msg(data.msg)
            window.parent.frames.location.href="/login"
          }
        }
      });

      return false;
    });
  });
</script>
</body>
</html>
